import { forwardRef, useEffect, useImperativeHandle } from 'react';
import { Form } from 'antd';
import dayjs from 'dayjs';

import AdTransformPeople from './AdTransformPeople';
import EduTransformPeople from './EduTransformPeople';
import TagSelectorFilter from './TagSelectorFilter';
const { useForm } = Form;

const GroupTagModalContent = forwardRef((props, ref) => {
  const {
    groupTagData,
    onValuesChange,
    coverage,
    rate,
    value,
    isAdTransformPeople,
    isDduTransformPeople,
    customType,
  } = props;
  const [form] = useForm();

  useEffect(() => {
    if (groupTagData) {
      if (customType === 9) {
        // 广告投放转化人群
        form.setFieldsValue({
          ...value,
          dateRange: [dayjs(value.dateRange[0]), dayjs(value.dateRange[1])],
        });
      } else if ([10, 11, 12].includes(customType)) {
        form.setFieldsValue({
          ...value,
          date_range: [dayjs(value.date_range[0]), dayjs(value.date_range[1])],
        });
      } else {
        form.setFieldsValue(value);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [JSON.stringify(groupTagData)]);

  useImperativeHandle(ref, () => {
    return {
      form,
    };
  });

  if (isDduTransformPeople) {
    return <EduTransformPeople customType={customType} form={form} />;
  }

  if (isAdTransformPeople) {
    return <AdTransformPeople form={form} groupTagData={groupTagData} />;
  }
  return (
    <Form form={form} onValuesChange={onValuesChange}>
      {(groupTagData || []).map((groupTagDataItem, index) => {
        return (
          <TagSelectorFilter
            key={index}
            tagInfo={groupTagDataItem}
            coverage={coverage}
            rate={rate}
          />
        );
      })}
    </Form>
  );
});

export default GroupTagModalContent;
